<template>
  <div v-loading="loading" class="home-container">
    <notice :list="homeData.notice" />
    <!-- 今日概况 -->
    <div class="todayOverview">
      <p class="mainTitle">今日概况</p>
      <div class="t-con">
        <div class="t-board order">
          <div class="t-item">
            <div class="order-number">
              <p>订单数量</p>
              <span>昨日: {{ homeData.yesterdayOrder }}</span>
            </div>
            <div class="order-number padding-top">
              <span>今日订单数</span>
              <p>{{ homeData.todayOrder }}</p>
            </div>
          </div>
        </div>
        <div class="t-board product">
          <div class="t-item">
            <div class="order-number">
              <p>仓储费</p>
              <span>昨日: {{ homeData.yesterdayStorage }}</span>
            </div>
            <div class="order-number padding-top">
              <span>今日仓储费</span>
              <p>{{ homeData.todayStorage }}</p>
            </div>
          </div>
        </div>
        <div v-if="!isCompanyRole" class="t-board orderSales">
          <div class="t-item">
            <div class="order-number">
              <p>订单销售额</p>
              <span>昨日: {{ homeData.yesterdayPrice }}</span>
            </div>
            <div class="order-number padding-top">
              <span>今日订单销售额</span>
              <p>{{ homeData.todayPrice }}</p>
            </div>
          </div>
        </div>
        <div v-if="isCompanyRole" class="t-board orderSales">
          <div class="t-item">
            <div class="order-number">
              <p>总额度</p>
              <span>{{ homeData.amount }}</span>
            </div>
            <div class="order-number padding-top">
              <span>剩余额度</span>
              <p>{{ homeData.overage_amount }}</p>
            </div>
          </div>
        </div>
        <!-- 客户数量 -->
        <div class="t-board product">
          <div class="t-item">
            <div class="order-number">
              <p>客户数量</p>
              <span>{{ homeData.countCompany }}</span>
            </div>
            <div class="order-number padding-top">
              <span>商品数量</span>
              <p>{{ homeData.countProduct }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 待办事宜 -->
    <p class="mainTitle">待办事宜</p>
    <div class="todoList">
      <div class="box-left">
        <div class="todo-div">
          <p>订单</p>
          <div class="todo-box">
            <todoList v-for="item in orderData" :key="item.id" :item="item" :number="homeData[item.key]" />
          </div>
        </div>
      </div>
      <div v-if="!isCompanyRole" class="box-right">
        <div class="todo-div no-margin">
          <p>采购单</p>
          <div class="todo-box">
            <todoList v-for="item in purchaseData" :key="item.id" :item="item" :number="homeData[item.key]" />
          </div>
        </div>
      </div>
    </div>
    <div class="tab-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.label" :name="item.name">
          <div class="tab-box-container">
            <!-- <div class="tab-content"></div> -->
            <div v-if="homeData[item.key].length > 0" :id="item.id" class="echart-box" style="width: 100%; height: 400px;" />
            <div v-else class="defalutPage">
              <img src="../../../assets/home/defalutPage@2x.png" alt="">
              <p>暂无数据</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import todoList from './components/todoList'
import notice from '../../../components/notice'
import echarts from 'echarts'
import { mapGetters } from 'vuex'
export default {
  components: { todoList, notice },
  data() {
    return {
      isCompanyRole: false,
      orderData: [
        // {
        //   id: 'otherData1',
        //   imgurl: require('../../../assets/home/list 9@2x.png'),
        //   name: '待审核',
        //   key: 'orderShip'
        // },
        {
          id: 'otherData2',
          imgurl: require('../../../assets/home/list2@2x.png'),
          name: '待发货',
          key: 'orderShip'
        }
      ],
      purchaseData: [
        {
          id: 'purchaseData1',
          imgurl: require('../../../assets/home/list 16@2x.png'),
          name: '待提交',
          key: 'toSubmitPurchase'
        },
        {
          id: 'purchaseData2',
          imgurl: require('../../../assets/home/list 9@2x.png'),
          name: '待审核',
          key: 'pendingReviewPurchase'
        },
        {
          id: 'purchaseData3',
          imgurl: require('../../../assets/home/list 15@2x.png'),
          name: '待复审',
          key: 'pendingRehearPurchase'
        },
        {
          id: 'purchaseData4',
          imgurl: require('../../../assets/home/list 8@2x.png'),
          name: '待下单',
          key: 'pendingOrderPurchase'
        }
      ],
      activeName: '1',
      tabData: [
        { id: 'orderEchart', name: '1', label: '15日内订单', key: 'order' },
        { id: 'priceEchart', name: '2', label: '15日内销售额', key: 'price' }
      ],
      loading: false,
      homeData: {
        order: [],
        price: []
      }
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  created() {
    const vm = this
    vm.getData()
    vm.isCompanyRole = this.roles.includes('company')
    if (vm.isCompanyRole) {
      this.tabData = [{ id: 'orderEchart', name: '1', label: '15日内订单', key: 'order' }]
    }
  },
  methods: {
    // 获取数据
    getData() {
      // 获取公告列表
      const vm = this
      vm.loading = true
      vm.$http.get('/home/index').then(res => {
        vm.homeData = res.data
        if (vm.homeData.order.length > 0) {
          vm.$nextTick(() => {
            vm.setOrderEchartLine()
          })
        }
        vm.loading = false
      }).catch(() => {
        vm.loading = false
      })
    },
    handleClick(tab) {
      const vm = this
      if (tab.name === '2' && vm.homeData.price.length > 0) {
        vm.$nextTick(() => {
          vm.setPriceEchartLine()
        })
      }
    },
    // 设置 订单 折线图
    setOrderEchartLine() {
      const vm = this
      const orderChart = echarts.init(document.getElementById('orderEchart'))
      const xData = vm.homeData.order.map(e => e.days)
      const sData = vm.homeData.order.map(e => e.total)
      // 绘制图表
      orderChart.setOption({
        title: { text: '15日内订单' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: '订单',
            type: 'line',
            data: sData,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ],
              symbol: 'pin' // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            }
          }
        ]
      })
    },
    // 设置 销售额 折线图
    setPriceEchartLine() {
      const vm = this
      const priceEchart = echarts.init(document.getElementById('priceEchart'))
      const xData = vm.homeData.price.map(e => e.days)
      const sData = vm.homeData.price.map(e => e.price)
      // 绘制图表
      priceEchart.setOption({
        title: { text: '15日内销售额' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: '销售额',
            type: 'line',
            data: sData,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-box-container {
  height: 400px;
}
.echart-box {
  width: 100%;
  height: 400px;
}
.home-container {
  p {
    margin: 0;
  }
  .mainTitle {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    padding: 10px 30px;
  }
  .padding-top {
    padding-top: 18px;
  }
  .order-number {
    display: flex;
    justify-content: space-between;
    p,
    span {
      font-weight: 500;
      color: #ffffff;
      font-size: 14px;
    }
    p {
      font-weight: bold;
    }
  }
  .todayOverview {
    margin-top: 10px;
    .t-con {
      display: flex;
      margin: 0 20px 7px 20px;
      .t-board {
        width: 33.3%;
        .t-item {
          margin: 0 10px 10px 10px;
          padding: 18px 20% 20px 30px;
        }
      }
      .order {
        .t-item {
          background: url("../../../assets/home/list 4@2x.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .product {
        .t-item {
          background: url("../../../assets/home/list 23@2x.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .orderSales {
        .t-item {
          background: url("../../../assets/home/list25@2x.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .todoList {
    display: flex;
    align-items: center;
    margin: 0 30px 26px 30px;
  }
  .box-left {
    width: 25%;
  }
  .box-right {
    width: 75%;
  }
  .todo-div {
    margin-right: 26px;
    background: #fff;
    padding: 25px 30px;
    box-shadow: 0px 4px 16px -4px rgba(194, 194, 194, 0.26);
    border-radius: 6px;
    > p {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      padding-bottom: 20px;
    }
    .todo-box {
      display: flex;
      justify-content: space-between;
    }
  }
  .tab-box {
    background: #ffffff;
    box-shadow: 0px 4px 16px -4px rgba(194, 194, 194, 0.26);
    border-radius: 6px;
    margin: 26px 30px;
    padding: 18px;
  }
  .tab-content {
    height: 225px;
  }
  .defalutPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 225px;
    img {
      width: 146px;
      height: 95px;
    }
    p {
      font-size: 16px;
      font-weight: 400;
      color: #aaaaaa;
      margin-top: 10px;
    }
  }
  .no-margin {
    margin-right: 0;
  }
}
</style>
